<template>
  <div class="index">
    <h3>父组件</h3>
    <div class="container">
      <Category>
        <ul slot="content">
          <li v-for="g in games" :key="g.id">{{g.name}}</li>
        </ul>
        <h4 slot="title">游戏列表</h4>
      </Category>
          
      <Category>
        <img :src="food" alt="" slot="content">
        <h4 slot="title">今日美食城市</h4>
      </Category>

      <Category>
        <video controls :src="movie" alt="" slot="content"/>
        <h4 slot="title">今日美食城市</h4>
      </Category>
    </div>
  </div>
</template>

<script>
  import Category from './Category'

  export default {
    name:'Index',
    data() {
      return {
        games:[
          {id:'a75s4dr65a',name:'英雄联盟'},
          {id:'a75s4dr65b',name:'王者农药'},
          {id:'a75s4dr65c',name:'红色警戒'},
          {id:'a75s4dr65d',name:'穿越火线'}
        ],
        food:'http://49.232.112.44/images/food.jpg',
        movie:'http://49.232.112.44/video/movie.mp4'
      }
    },
    components:{Category}
  }
</script>

<style lang="less" scoped>
  .index {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .container {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  h4 {
    background-color: orange;
    text-align: center;
  }
  img,video {
    width: 100%;
  }
</style>